<template>
    <div>
        <el-input
                v-model="name"
                style="width: 30%;"
                placeholder="请输入用户名搜索"
               >
        </el-input>
        <el-button @click.prevent="findAll()">搜索</el-button>
        <el-table
                :data="tableData"
                style="width: 100%"
                border
                :header-cell-style="{textAlign: 'center'}"
                :cell-style="{ textAlign: 'center' }">
            <el-table-column
                    label="用户名"
                    prop="userName">
            </el-table-column>
            <el-table-column
                    label="手机号"
                    prop="userPhone">
            </el-table-column>
            <el-table-column
                    label="邮箱"
                    prop="uesrEmail"
                    width="150%"  >
            </el-table-column>
            <el-table-column
                    label="性别"
                    width="70%"
                    prop="sex">
            </el-table-column>
            <el-table-column
                    label="地址"
                    width="200%"
                    prop="address">
            </el-table-column>
            <el-table-column
                    label="是否会员"
                    width="70%"
                    prop="ismember">
            </el-table-column>
            <el-table-column
                    label="个人签名"
                    prop="userSign">
            </el-table-column>
            <el-table-column
                    label="用户状态"
                    prop="userStatus">
            </el-table-column>
            <!--<el-table-column-->
            <!--label="头像"-->
            <!--prop="avatar">-->
            <!--</el-1table-column>-->

            <el-table-column
                    align="right"
                    label="操作"
           >
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click.prevent="handleEdit(scope.row.userId)">改变用户状态</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        ></el-pagination>
    </div>


</template>


<script>
    export default {
        data() {
            return {
                tableData: [],
                name:null,
                pageNum:1,
                pageSize:5,
                total:0,
                prePage:1,
                nextPage:1,
                pages:0,

            }
        },
        methods: {
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.findAll();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.findAll();
            },
            findAll(){
                let url=this.$baseUrl+"/user/findUsers"
                this.axios.get(url,{
                    params:{
                        name:this.name,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }
                }).then((data)=>{
                    this.tableData=data.data.data.list;
                    this.pageNum=data.data.data.pageNum;
                    this.total = data.data.data.total;
                    this.prePage = data.data.data.prePage;
                    this.nextPage = data.data.data.nextPage;
                    this.pages=data.data.data.pages;
                    this.pageSize=data.data.data.pageSize;

                    for (let i=0;i<this.tableData.length;i++){
                        this.tableData[i].sex = this.tableData[i].sex==1?'男':'女'
                        this.tableData[i].ismember = this.tableData[i].ismember==1?'会员':'非会员'
                        this.tableData[i].userStatus = this.tableData[i].userStatus==1?'正常':'被冻结'

                    }

                })

            },
            handleEdit(id){
                let url=this.$baseUrl+"/user/update?userid="+id
                this.axios.put(url).then((data)=>{
                    if (data.data.code==200){
                        this.$message.success("状态修改成功！")
                    }else {
                        this.$message.error(data.data.message)
                    }
                    this.findAll()
                })

            }
        },created(){
                this.findAll()
        }
    }
</script>
